{template 'common/header'}
<div class='container' style='padding:0 5px 10px;margin:0;width:100%'>
<ul class="nav nav-tabs">
  <li {if $opp == 'mailsetup'}class="active"{/if}><a href="{php echo $this->createWebUrl('mailsetup');}">通讯录基本设置</a></li>
  <li {if $opp == 'adminmail'}class="active"{/if}><a href="{php echo $this->createWebUrl('adminmail');}">通讯录管理</a></li>
  <li {if $opp == 'mailacode'}class="active"{/if}><a href="{php echo $this->createWebUrl('mailacode');}">通讯录二维码设置</a></li>
</ul>
</div>
<div class='container' style='padding: 0 5px 10px; margin: 0; width: 100%'>
    <div class="row-fluid">

        <div class="span8 control-group">

            <a onclick="return confirm('清除当前缓存，确认吗？'); return false;" href="{php echo $this->createWebUrl('mailacode', array('op' => 'clear'))}" title="删除"

               class="btn btn-danger"><i class="fa fa-times">清除当前缓存</i></a>

        </div>

    </div>

    <script type="text/javascript" src="{BBYSCM}js/jquery.gcjs.js"></script>

    <script type="text/javascript" src="{BBYSCM}js/jquery.form.js"></script>

    <script type="text/javascript" src="{BBYSCM}js/tooltipbox.js"></script>

    <script language='javascript' src="{BBYSCM}js/designer.js"></script>

    <script language='javascript' src="{BBYSCM}js/jquery.contextMenu.js"></script>

    <link href="{BBYSCM}js/jquery.contextMenu.css" rel="stylesheet">

    <style type='text/css'>

        #poster {

            width:320px;height:504px;border:1px solid #ccc;position:relative

        }

        #poster .bg { position:absolute;width:100%;z-index:0}

        #poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }

        {if $poster}

        #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }

        {else}

        #poster .drag { position: absolute; width:80px;height:80px; }

        {/if}



        #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}

        #poster .drag img {position:absolute;z-index:0;width:100%; }



        #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{

            position:absolute;

            width:7px;

            height:7px;

            z-index:1;

            font-size:0;

        }



        {if $poster}

        #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{

            background:#C00;

        }

        {/if}

        .rLeftDown,.rRightUp{cursor:ne-resize;}

        .rRightDown,.rLeftUp{cursor:nw-resize;}

        .rRight,.rLeft{cursor:e-resize;}

        .rUp,.rDown{cursor:n-resize;}

        .rLeftDown{left:-4px;bottom:-4px;}

        .rRightUp{right:-4px;top:-4px;}

        .rRightDown{right:-4px;bottom:-4px;}

        {if $poster}

        .rRightDown{background-color:#00F;}

        {/if}



        .rLeftUp{left:-4px;top:-4px;}

        .rRight{right:-4px;top:50%;margin-top:-4px;}

        .rLeft{left:-4px;top:50%;margin-top:-4px;}

        .rUp{top:-4px;left:50%;margin-left:-4px;}

        .rDown{bottom:-4px;left:50%;margin-left:-4px;}

        .context-menu-layer { z-index:9999;}

        .context-menu-list { z-index:9999;}



    </style>

    <form class="form-horizontal form"  action="" method="post"  id="theform" enctype="multipart/form-data">

        <input type='hidden' name='posterid' value="{$poster['id']}"/>

        <input type='hidden' name='op' value="pro"/>

        <div class="panel panel-success">

            <div class="panel-heading">通讯录二维码设置：</div>

            <div class="panel-body">

                <div class="form-group">

                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style='color:red'>*</span>图片设计</label>

                    <div class="col-sm-9 col-xs-12">

                        <table style='width:100%;'>

                            <tr>

                                <td style='width:300px;padding:10px;' valign='top'>

                                    <div id='poster'>

                                        {if !empty($poster['bg'])}

                                        <img src='{php echo tomedia($poster['bg'])}' class='bg'/>

                                        {/if}

                                        {if !empty($data)}

                                        {loop $data $key $d}

                                        <div class="drag" type="{$d['type']}" index="{php echo $key+1}" style="zindex:{php echo $key+1};left:{$d['left']};top:{$d['top']};

                                               width:{$d['width']};height:{$d['height']}" src="{$d['src']}" size="{$d['size']}"

                                             color="{$d['color']}" >

                                            {if $d['type']=='qr'}

                                            <img src="../addons/bbyscm_card/style/images/qr.jpg" />

                                            {elseif $d['type']=='img' || $d['type']=='thumb'}

                                            <img src="{php echo empty($d['src'])?'../addons/bbyscm_card/style/images/img.jpg':tomedia($d['src'])}" />

                                            {elseif $d['type']=='mail_name'}

                                            <div class=text style="font-size:{$d['size']};color:{$d['color']};">通讯录名称</div>
                                            
                                            {/if}

                                            <div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div>

                                        </div>

                                        {/loop}

                                        {/if}

                                    </div>

                                </td>



                                <td valign='top' style='padding:10px;'>

                                    <div class='panel panel-default'>

                                        <div class='panel-body'>

                                            <div class="form-group" id="bgset">

                                                <label class="col-xs-12 col-sm-3 col-md-2 control-label">背景图片</label>

                                                <div class="col-sm-9 col-xs-12">

                                                    {php echo tpl_form_field_image('bg', $poster['bg']);}

                                                    <span class='help-block'>背景图片尺寸: 640 * 1008</span>

                                                </div>

                                            </div>

                                            <div class="form-group">

                                                <label class="col-xs-12 col-sm-3 col-md-2 control-label">图片元素</label>

                                                <div class="col-sm-9 col-xs-12">

                                                    <button class='btn btn-default btn-com' type='button' data-type='mail_name' >通讯录名称</button>
                                                    
                                                    <button class='btn btn-default btn-com' type='button' data-type='qr' >二维码</button>

                                                    <button class='btn btn-default btn-com' type='button' data-type='img' >图片</button>

                                                </div>

                                            </div>

                                            <div id='qrset' style='display:none'>

                                                <div class="form-group">

                                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">二维码尺寸</label>

                                                    <div class="col-sm-9 col-xs-12">

                                                        <select id='qrsize' class='form-control'>

                                                            <option value='1'>1</option>

                                                            <option value='2'>2</option>

                                                            <option value='3'>3</option>

                                                            <option value='4'>4</option>

                                                            <option value='5'>5</option>

                                                            <option value='6'>6</option>

                                                        </select>

                                                    </div>

                                                </div>

                                            </div>

                                            <div id='nameset' style='display:none'>

                                                <div class="form-group">

                                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">颜色</label>

                                                    <div class="col-sm-9 col-xs-12">

                                                        {php echo tpl_form_field_color('color')}

                                                    </div>

                                                </div>

                                                <div class="form-group">

                                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">大小</label>

                                                    <div class="col-sm-4">

                                                        <div class='input-group'>

                                                            <input type="text" id="namesize" class="form-control namesize" placeholder="例如: 14,16"  />

                                                            <div class='input-group-addon'>px</div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="form-group" id="imgset" style="display:none">

                                                <label class="col-xs-12 col-sm-3 col-md-2 control-label">图片设置</label>

                                                <div class="col-sm-9 col-xs-12">

                                                    {php echo tpl_form_field_image('img')}

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </td>

                            </tr>

                        </table>

                    </div>

                </div>



                <div class="form-group"style="">

                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">备注</label>

                    <div class="col-sm-9 col-xs-12">

                        <div class="help-block">

                            姓名，需要下载一个字体文件.这样生成会比较慢， msyhbd.ttf放在 /web/resource/fonts/  目录。

                            <a href="http://www.zh0537.com/msyhbd.ttf" target="_blank">点我下载</a>

                        </div>

                    </div>

                </div>
 <div class="form-group"style="">

                    <label class="col-xs-12 col-sm-3 col-md-2 control-label">说明</label>

                    <div class="col-sm-9 col-xs-12">

                        <div class="help-block">
二维码不重复生成，系统内有二维码就不再生成，因为二维码接口有二维码生成个数限制，为了节约资源而设置的，调试期间可在手机上提交名片修改，每修改一次系统自动清除原存的二维码，不提交修改二维码不再重新生成，是为了节约二维码资源个数！通讯录二维码也有相同机制。
                        </div>

                    </div>

                </div>
                <div class="form-group col-sm-12">

                    <input type="submit" name="submit" value="提交" class="btn btn-primary col-lg-1"/>

                    <input type="hidden" name="token" value="{$_W['token']}"/>

                    <input type="hidden" name="data" value="" />

                </div>

            </div>

        </div>

    </form>

</div>

<script>

    $('form').submit(function(){

        var data = [];

        $('.drag').each(function(){

            var obj = $(this);

            var type = obj.attr('type');

            var left = obj.css('left'),top = obj.css('top');

            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};

            if(type=='mail_name' ||  type=='title'){

                d.size = obj.attr('size');

                d.color = obj.attr('color');
			   
            } else if(type=='qr'){

                d.size = obj.attr('size');

            } else if(type=='img'){

                d.src = obj.attr('src');

            }

            data.push(d);

        });

        $(':input[name=data]').val( JSON.stringify(data));

        return true;

    });

    function bindEvents(obj){

        var index = obj.attr('index');

        var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });

        rs.Set($(".rRightDown",obj), "right-down");

        rs.Set($(".rLeftDown",obj), "left-down");

        rs.Set($(".rRightUp",obj), "right-up");

        rs.Set($(".rLeftUp",obj), "left-up");

        rs.Set($(".rRight",obj), "right");

        rs.Set($(".rLeft",obj), "left");

        rs.Set($(".rUp",obj), "up");

        rs.Set($(".rDown",obj), "down");

        rs.Scale = true;

        var type = obj.attr('type');

        if(type=='mail_name' || type=='img' || type=='title' || type=='marketprice' || type=='productprice'){

            rs.Scale = false;

        }

        new Drag(obj, { Limit: true, mxContainer: "#poster" });

        $('.drag .remove').unbind('click').click(function(){

            $(this).parent().remove();

        })

        $.contextMenu({

            selector: '.drag[index=' + index + ']',

            callback: function(key, options) {

                var index = parseInt($(this).attr('zindex'));

                if(key=='next'){

                    var nextdiv = $(this).next('.drag');

                    if(nextdiv.length>0 ){

                        nextdiv.insertBefore($(this));

                    }

                } else if(key=='prev'){

                    var prevdiv = $(this).prev('.drag');

                    if(prevdiv.length>0 ){

                        $(this).insertBefore(prevdiv);

                    }

                } else if(key=='last'){

                    var len = $('.drag').length;

                    if(index >=len-1){

                        return;

                    }

                    var last = $('#poster .drag:last');

                    if(last.length>0){

                        $(this).insertAfter(last);

                    }

                }else if(key=='first'){

                    var index = $(this).index();

                    if(index<=1){

                        return;

                    }

                    var first = $('#poster .drag:first');

                    if(first.length>0){

                        $(this).insertBefore(first);

                    }

                }else if(key=='delete'){

                    $(this).remove();

                }

                var n =1 ;

                $('.drag').each(function(){

                    $(this).css("z-index",n);

                    n++;

                })

            },

            items: {

                "next": {name: "调整到上层"},

                "prev": {name: "调整到下层"},

                "last": {name: "调整到最顶层"},

                "first": {name: "调整到最低层"},

                "delete": {name: "删除元素"}

            }

        });

        obj.unbind('click').click(function(){

            bind($(this));

        })

    }

    var imgsettimer = 0 ;

    var nametimer = 0;

    var bgtimer = 0 ;

    function bindType(type){

        $("#goodsparams").hide();

        $(".type4").hide();

        if(type=='4'){

            $(".type4").show();

        } else if(type=='3'){

            $("#goodsparams").show();

        }

    }

    function clearTimers(){

        clearInterval(imgsettimer);

        clearInterval(nametimer);

        clearInterval(bgtimer);

    }

    function getImgUrl(val){

        if(val.indexOf('http://')==-1){

            val = "{$_W['attachurl']}" + val;

        }

        return val;

    }

    function bind(obj){

        var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');

        imgset.hide(),nameset.hide(),qrset.hide();

        clearTimers();

        var type = obj.attr('type');

        if(type=='img'){

            imgset.show();

            var src = obj.attr('src');

            var input = imgset.find('input');

            var img = imgset.find('img');

            if(typeof(src)!='undefined' && src!=''){

                input.val(src);

                img.attr('src',getImgUrl(src));

            }

            imgsettimer = setInterval(function(){

                if(input.val()!=src && input.val()!=''){

                    var url = getImgUrl(input.val());

                    obj.attr('src',input.val()).find('img').attr('src',url);

                }

            },10);

        } else if(type=='mail_name' ||  type=='title'){

            nameset.show();

            var color = obj.attr('color') || "#000";

            var size = obj.attr('size') || "16";

            var input = nameset.find('input:first');

            var namesize = nameset.find('#namesize');

            var picker = nameset.find('.sp-preview-inner');

            input.val(color); namesize.val(size.replace("px",""));

            picker.css( {'background-color':color,'font-size':size});

            nametimer = setInterval(function(){

                obj.attr('color',input.val()).find('.text').css('color',input.val());

                obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");

            },10);
		
        } else if(type=='qr'){

            qrset.show();

            var size = obj.attr('size') || "3";

            var sel = qrset.find('#qrsize');

            sel.val(size);

            sel.unbind('change').change(function(){

                obj.attr('size',sel.val())

            });

        }

    }

    $(function(){

        {if !empty($poster['id'])}

        {if $poster}

        $('.drag').each(function(){

            bindEvents($(this));

        })

        {/if}

        {/if}

        $(':radio[name=type]').click(function(){

            var type = $(this).val();

            bindType(type);

        })

        //改变背景

        $('#bgset').find('button:first').click(function(){

            var oldbg = $(':input[name=bg]').val();

            bgtimer = setInterval(function(){

                var bg = $(':input[name=bg]').val();

                if(oldbg!=bg){

                    if(bg.indexOf('http://')==-1){

                        bg = "{$_W['attachurl']}" + bg;

                    }

                    $('#poster .bg').remove();

                    var bgh = $("<img src='" + bg + "' class='bg' />");

                    var first = $('#poster .drag:first');

                    if(first.length>0){

                        bgh.insertBefore(first);

                    } else{

                        $('#poster').append(bgh);

                    }

                    oldbg = bg;

                }

            },10);

        })

        $('.btn-com').click(function(){

            var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');

            imgset.hide(),nameset.hide(),qrset.hide();

            clearTimers();

            if($('#poster img').length<=0){

                //alert('请选择背景图片!');

                //return;

            }

            var type = $(this).data('type');

            var img = "";

            if(type=='qr'){

                img = '<img src="../addons/bbyscm_card/style/images/qr.jpg" />';

            }

            else if(type=='head'){

                img = '<img src="../addons/bbyscm_card/style/images/head.jpg" />';

            }else  if(type=='img' || type=='thumb'){

                img = '<img src="../addons/bbyscm_card/style/images/img.jpg" />';

            }else if(type=='mail_name'){

                img = '<div class=text>通讯录名称</div>';
           
            }

            var index = $('#poster .drag').length+1;

            var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' + img+'<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

            $('#poster').append(obj);

            bindEvents(obj);

        });

        $('.drag').click(function(){

            bind($(this));

        })

    })

</script>

